import React from 'react';
import styles from '@/assets/pay/pay.module.css';

const RoomPay = () => {
    const [searchParams] = React.Router.useSearchParams();
    // 支付订单ID状态（从路由参数获取）
    const [payid] = React.useState(searchParams.get('payid') || 0);
    // 订单信息状态
    const [order, setOrder] = React.useState<any>({});
    // 倒计时显示状态
    const [minuteShow, setMinuteShow] = React.useState('0分');
    const [secondShow, setSecondShow] = React.useState('0秒');
    // 超时状态标记
    const [isTimeout, setIsTimeout] = React.useState(false);

    // 定时器引用（使用useRef保持持久化引用）
    const timers = React.useRef<NodeJS.Timeout | null>(null);
    const intervalRef = React.useRef<NodeJS.Timeout | null>(null);
    // 倒计时总时间（单位：秒）
    const maxtime = React.useRef(0);
    // 超时状态引用
    const isTimeoutRef = React.useRef(isTimeout);
    // 订单信息引用
    const orderRef = React.useRef(order); 
    //请求中止控制器（用于取消网络请求）
    const abortControllerRef = React.useRef(new AbortController());

    // 使用ref同步最新状态
    React.useEffect(() => 
    {
        isTimeoutRef.current = isTimeout;
        orderRef.current = order;
    }, [isTimeout, order]);

    // 进来请求支付详情
    React.useEffect(() => 
    {
        OrderData();
        // 组件卸载时的清理函数
        return () => {
            // 清除定时器
            CleanupResources();
        };
    }, []);

    const CleanupResources = () => 
    {
        // 清除定时器
        if (timers.current) clearInterval(timers.current);
        if (intervalRef.current) clearInterval(intervalRef.current);
        
        // 中止正在进行的请求
        abortControllerRef.current.abort();
        
        // 初始化
        timers.current = null;
        intervalRef.current = null;
    };

    // 获取订单数据
    const OrderData = async () => 
    {
        CleanupResources(); // 清理资源
        abortControllerRef.current = new AbortController(); // 创建新的请求控制器
        
        try {
            // 发送支付信息请求（携带中止信号）
            const result = await React.HTTP.post('/pay/PayInfo', 
                { payid }, 
                { signal: abortControllerRef.current.signal }
            );

            if (result.code === 1) 
            {
                // 初始化倒计时器
                setOrder(result.data);
                setIsTimeout(false);
                maxtime.current = 180;
                
                // 倒计时定时器
                timers.current = setInterval(CountDown, 1000);
                // 状态定时器
                intervalRef.current = setInterval(GetStatus, 1000);

            } 
            else 
            {
                React.error(result.msg, () => React.navigate(-1));
            }
        } catch (error) {}
    };

    // 倒计时
    const CountDown = React.useCallback(() => 
    {
        if (maxtime.current >= 0) 
        {
            // 计算剩余时间
            const minutes = Math.floor(maxtime.current / 60);
            const seconds = maxtime.current % 60;
            // 更新计时器显示
            setMinuteShow(`${minutes}分`);
            setSecondShow(`${seconds}秒`);
            maxtime.current -= 1;
        } 
        else 
        {
            HandleTimeout();
        }
    }, []);

    // 倒计时结束
    const HandleTimeout = () => 
    {
        if (!isTimeoutRef.current) 
        {
            setIsTimeout(true);// 标记已超时
            CleanupResources(); // 清理所有资源
            
            // 更新订单支付过期状态
            setOrder((prev:any) => ({
                ...prev,
                wxcode: require('@/assets/pay/images/qrcode_timeout.png'),
                zfbcode: require('@/assets/pay/images/qrcode_timeout.png'),
            }));

            // 过期提示
            React.UI.Dialog.alert({
                title: '支付提示',
                content: '订单已失效',
                confirmText: '确定',
                onConfirm: () => React.navigate(-1)
            });
        }
    };

    // 订单状态
    const GetStatus = async () => 
    {
        try {
            const result = await React.HTTP.post('/pay/PayStatus', 
                { payid }, 
                { signal: abortControllerRef.current.signal }
            );

            if(result.code === 1)
            {
                React.success(result.msg, React.navigate(result.data.jump));
                setIsTimeout(true);// 标记已超时
                CleanupResources(); // 清理所有资源
            }

            if (result.code !== 1 && result.msg === '支付订单不存在') {

                React.error(result.msg, () => React.navigate(-1));
                return false;
            }


        } catch (error) {}
    };

    // 复制金额
    const OnCopy = () => 
    {
        const text = order.price?.toString() || '';
        // 用于将 text 内容写入剪贴板
        navigator.clipboard.writeText(text)
            .then(() => React.success('已复制金额'))
            .catch(() => React.error('复制失败'));
    };

    return (
        <div className={styles.mod_ct}>
            <h1 className={styles.mod_title}>
                <span className={order.type === "zfb" ? "ico_log ico-4" : "ico_log ico-3"}></span>
            </h1>

            <div style={{ marginTop: '10px' }}>
                <span style={{ color: 'red' }}>
                    提示：付款金额要与显示的金额一致，否则后果自负
                </span>
            </div>

            <div className={styles.amount} id="money">
                ￥<span className={styles.amount2}>{order.price}</span>元
                <span 
                    style={{ fontSize: '10px', color: 'darkcyan' }} 
                    onClick={OnCopy}
                >
                    &nbsp;&nbsp;复制金额
                </span>
            </div>

            <div className="qrcode-img-wrapper">
                <div className="qrcode-img-area">
                    <img 
                        src={order.type === 'wx' ? order.wxcode : order.zfbcode} 
                        style={{ width: '220px' }} 
                        alt="支付二维码"
                    />
                </div>
            </div>

            <div className={styles.time_item} style={{ paddingTop: '10px' }}>
                <div className={styles.time_item}>
                    <h1>订单名称：<span>{order.name}</span></h1>
                </div>
                <div className={styles.time_item}>
                    <h1>订单号：<span>{order.code}</span></h1>
                </div>
                <strong>订单支付有效期</strong>
                <strong>{minuteShow}</strong>
                <strong>{secondShow}</strong>
            </div>

            <div className={styles.tip}>
                <div className={styles.ico_scan}></div>
                <p>{order.type === 'wx' ? '打开微信扫一扫' : '打开支付宝扫一扫'}</p>
            </div>
        </div>
    );
};

export default RoomPay;